import React from 'react'
import { Layout, Form } from 'antd'
import BaseMenu from '../../components/menu/index'
import BaseLayout from '../../components/layout/index'
import ListSearchForm from './common/listSearchForm'
import Drag from './drag/index'

const TableForm = Form.create()(ListSearchForm) as any
export default class App extends BaseLayout {
    public menuStyle: any
    private getTableFormItems(type:string,item ?: any) {
        const menuObj : any = {
            "left": {
                type: "input",
                formItem: {label:"菜单名称"},
                fieldDecorator:{},
                component:{
                    placeholder:"请输入您喜欢的东西"
                }
            },
            "center":{
                type: "input",
                formItem: {label:"歌单名称"},
                fieldDecorator:{},
                component:{
                    placeholder:"请输入您喜欢的音乐",
                    
                }
            },
            "right":{
                type: "input",
                formItem: {label:"歌手"},
                fieldDecorator:{},
                component:{
                    placeholder:"请输入您喜欢的歌手"
                }
            }
        }
        return Object.keys(menuObj).map((key) => {
            return Object.assign(menuObj[key],{
                name:key,
                fieldDecorator:Object.assign(menuObj[key].fieldDecorator,
                    item && item[key] ? {initialValue:item[key]} : {}
                )
            })
        })
    }
    public render() {
        this.menuStyle = {
            mode: 'horizontal',
            style: {
                backgroundColor: 'white',
                height: '64px',
                marginLeft: '150px',
                width: '100%'
            }
        }
        return (
            <Layout>
                {this.renderSider()}
                <Layout>
                    {this.renderHeader(<BaseMenu {...this.menuStyle}></BaseMenu>)}
                    {this.renderContent(
                        <TableForm items={this.getTableFormItems('')}></TableForm>,
                        <Drag></Drag>
                    )}
                    {this.renderFooter(<div>@2020-zy博客</div>)}
                </Layout>
            </Layout>
        )
    }
}